{% extends "base.html" %}
{% block title %}OPC参数{% endblock %}
{% block head %}
<style type="text/css">
</style>
{% endblock %}
{% block content %}

<div class="row">
    <div class="align-middle col-12">
        <h2 class="h2 d-inline">
            <span class="text-muted ">标签配置预览</span>
        </h2>
        <hr class="border-bottom border-danger" />
    </div>
    <label for="module" class="col-sm1 col-form-label col-form-label-md ml-3 ">
        <h5>请选择模块:</h5>
    </label>

    <div class="col-auto">
        <select class="form-control form-control-md " name='module' id="module">
            <option>s_opcda_client1</option>
            <option>s_opcda_client2</option>
            <option>s_opcda_client3</option>
            <option>modbus1</option>
            <option>modbus2</option>
        </select>
    </div>

    <label for="module" class="col-sm1 col-form-label col-form-label-md ml-3 ">
        <h5>请选择组:</h5>
    </label>
    <div class="col-auto">
        <select class="form-control form-control-md " name='groups' id="groups">

        </select>
    </div>

    <button type="button" class="col-sm-1 form-control form-control-md btn btn-outline-info"
        onclick="module_tag_select()">点击 查询 </button>

    <div class="col-auto">
        <input class="form-control form-control-md " name='tagname' id="tagname" />
    </div>
    <button type="button" class="col-sm-1 form-control form-control-md btn btn-outline-info" onclick="Search()">点击 搜索
    </button>

</div>

<div class="row">
    <div class="col-md-12 mt-1">
        <table id='table' class="table table-bordered table-hover">
            <thead id='keys'>

            </thead>
            <tbody id='values'>
            </tbody>
        </table>
    </div>
</div>

<!-- 分页 -->
<div class="row mt-5">
    <div class="col-md-12 col-sm-12 ">
        <nav>
            <ul class="pagination justify-content-end">
                <select class="form-control " name='pages' id="pages" onchange="pages(this)"
                    style="width: fit-content;">
                    <option selected>5</option>
                    <option>10</option>
                    <option>12</option>
                    <option>20</option>
                    <option>50</option>
                </select>

                <ul class="pagination  justify-content-end" id='page'>
                    <li class="page-item "><a class="page-link form-control " onclick=" pre()">Pres</a></li>
                    <li class="page-item"><a class="page-link form-control btn btn-info" id='page1'
                            onclick="page(this)">1</a></li>
                    <li class="page-item"><a class="page-link form-control" onclick=" next()">Next</a></li>
                </ul>

                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='total' name='total' class="form-control" style="width: 60px;" />
                <li class="page-item"><a class="page-link form-control">条</a></li>
                <li class="page-item"><a class="page-link form-control">共</a></li>
                <input id='max_pages' name='max_pages' class="form-control" style="width: 60px;" />
                <li class="page-item"><a class="page-link form-control">页</a></li>
            </ul>
        </nav>
    </div>
</div>

<script>
    var csrftoken = $("meta[name=csrf-token]").attr("content");

    function module_tag_select() {
        var module_name = $("#module").val()
        var pages = $("#pages").val();
        var page = $('#page1').text();
        $.ajax({
            url: "{{url_for('cs.page')}}",
            data: {
                "module": module_name,
                "group": 1,
                "pages": pages,
                "page": page,
            },
            type: 'post',
            headers: {
                "X-CSRFToken": csrftoken
            },
            dataType: 'json',
            success: page_success,
            error: function (data) {
                console.log(data);
            },
        });
    }

    function Search(obj) {
        var tagname = $("#tagname").val();
        var module_name = $("#module").val();
        $.ajax({
            url: "{{url_for('cs.search')}}",
            data: {
                "tagname": tagname,
                "module": module_name,
            },
            type: 'get',
            dataType: 'json',
            success: page_success,
            error: function (data) {
                console.log(data);
            },
            complete: function () {
                console.log("提交完成！");
            }
        });
        return false;
    }

    function page(obj) {
        var pages = $("#pages").val();
        var page = $(obj).text();
        var module_name = $("#module").val()
        $(obj).addClass('active')
        $(obj).parent('li').siblings().children().removeClass('active')
        $.ajax({
            url: "{{url_for('cs.page')}}",
            // data: "pages=10&page=1" ,
            data: {
                "module": module_name,
                "group": 1,
                "pages": pages,
                "page": page,
            },
            type: 'get',
            dataType: 'json',
            success: page_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false;
    }

    function pages(obj) {
        var pages = $(obj).val();
        var module_name = $("#module").val()
        var group = $("#groups").val()
        $.ajax({
            url: "{{url_for('cs.page')}}",
            data: {
                "module": module_name,
                "group": group,
                "pages": pages,
                "page": 1,
            },
            type: 'get',
            dataType: 'json',
            success: pages_success,
            error: function (data) {
                console.log(data);
            },
        });
        return false;
    }

    function page_success(data) {
        var $keys = '';
        var $values = '';
        var $option = '';
        var count = data.total //组数
        var groups = data.groups
        $("#total").val(count)
        $("#max_pages").val(data.max_pages)
        console.log(data.tags)
        if (count > 0) {
            for (i in data.tags) {
                var $keys_td = ''
                var $values_td = ''
                for (t in data.tags[i]) {
                    if(t!='tags'){
                    $keys_td +=
                        '<th scope="row" class="table-danger">' + t + '</th>';
                    $values_td +=
                        '<td scope="row" class="table-info">' + data.tags[i][t] + '</td>'
                }};
                $keys = '<tr>' + $keys_td +'<th scope="row" class="table-danger">' +'操作'+ '</th>'+ '</tr>';
                $values += '<tr>' + $values_td +'<th scope="row" class="table-danger">' +'<button class="btn btn-info">'+"编辑"+'</button>'+ '</th>'+ '</tr>'
                var $subject_con = $('#keys');
                $subject_con.html($keys)
                var $subject_con = $('#values');
                $subject_con.html($values)

            }


            for (var g = 1; g < groups + 1; g++) {
                $option += '<option>' + g + '</option>'
                var $groups = $('#groups');
                $groups.html($option)
            }
        } else {
            $values += '<tr>' + '<td scope="row" class="table-danger">' + '没有位号信息，请重新上传。。。' + '</td>' + '</tr>'
            var $subject_con = $('#values');
            $subject_con.html($values)
        }
    }

    function pages_success(data) {
        var $keys = '';
        var $values = '';
        var $lis = '';
        var $lis1 = '';
        var $option = '';
        var count = data.total //条数
        var groups = data.groups //组数
        console.log(data.max_pages)
        $("#total").val(count)
        $("#max_pages").val(data.max_pages)
        if (count > 0) {
            for (i in data.tags) {
                var $keys_td = ''
                var $values_td = ''
                for (t in data.tags[i]) {
                    $keys_td +=
                        '<td scope="row" class="table-danger">' + t + '</td>';
                    $values_td +=
                        '<td scope="row" class="table-danger">' + data.tags[i][t] + '</td>'
                };
                $keys = '<tr>' + $keys_td + '</tr>';
                $values += '<tr>' + $values_td + '</tr>'
                var $subject_con = $('#keys');
                $subject_con.html($keys)
                var $subject_con = $('#values');
                $subject_con.html($values)

            }


            for (var g = 1; g < groups + 1; g++) {
                $option += '<option>' + g + '</option>'
                var $groups = $('#groups');
                $groups.html($option)
            }
        } else {
            $values += '<tr>' + '<td scope="row" class="table-danger">' + '没有位号信息，请重新上传。。。' + '</td>' + '</tr>'
            var $subject_con = $('#values');
            $subject_con.html($values)
        }

        var head = '<li class="page-item "><a class="page-link form-control" onclick="pre()">' + 'Pres' + '</a></li>'
        var tail = '<li class="page-item "><a class="page-link form-control" onclick="next()">' + 'Next' + '</a></li>'
        if (data.max_pages > 0) {
            for (var i = 1; i < data.max_pages + 1; i++) {
                $lis +=
                    '<li class="page-item"><a class="page-link form-control btn btn-info mr-2" id="page' + i +
                    '" onclick="page(this)">' +
                    i + '</a></li>'
            }
            $lis1 = head + $lis + tail
            var $subject_con = $('#page');
            $subject_con.html($lis1)
        } else {
            $lis1 =
                '<li class="page-item"><a class="page-link form-control btn btn-info" id="page1" onclick="page(this)">' +
                '对不起，没有' + '</a></li>'
            var $subject_con = $('#values');
            $subject_con.html($values)
        }
    }

    $(document).ready(function () {
        page($("#page1"))
    })
   





</script>

{% endblock %}